<template>
  <div class="jobtitle">
    <router-link to="/job" class="iconfont jobname">{{this.job}} &#xe632;</router-link>
    <router-link to="/city" class="iconfont city">{{this.city}} &#xe632;</router-link>
    <div class="iconfont screen">筛选 &#xe632;</div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'HomeJobtitle',
  computed:{
    ...mapState(['city']),
    ...mapState(['job'])

  }
};
</script>

<style lang="scss" scoped>
.jobtitle {
  position: relative;
  top: -1rem;
  overflow: hidden;
  height: 0;
  padding-bottom: 12%;
  
  // background: red;
  .jobname {
    position: absolute;
    left: 0.2rem;
    bottom: 0.2rem;
    font-size: 0.5rem;
    color: #111;

  }
  .city {
    position: absolute;
    right: 1.5rem;
    bottom: 0.2rem;
    color: #777;
  }
  .screen {
    position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
    color: #777;
  }
}
</style>